<template>
  <div class="ChangePassword">
    <!-- 导航 -->
    <HeaderTitle :title="WebName"></HeaderTitle>
    <!-- 列表box -->
    <div class="ChangePasswordBox">
      <van-cell-group>

        <van-field
          v-model="OldPassword"
          type="password"
          placeholder="请输入旧密码"
          clearable
          :error-message="OldPasswordError"
          :mask="false"
        />
        <van-field
          v-model="setOnePassword"
          type="password"
          placeholder="请输入新密码"
          clearable
          :error-message="setOnePasswordError"
          mask="true"
        />
        <van-field
          v-model="setTwoPassword"
          type="password"
          placeholder="请再次输入新密码"
          clearable
          :error-message="setTwoPasswordError"
          mask="true"
        />
      </van-cell-group>
    </div>

    <van-button type="info" size="large" @click="changepasswordBtn">确认修改</van-button>
  </div>
</template>
<script>
/* ... */
import HeaderTitle from '@/components/HeaderTitle.vue'
import { updatePassword } from '@/api/api'
export default {
  name: 'changepassword',

  mixins: [],

  components: {
    HeaderTitle
  },

  props: {},

  data () {
    return {
      WebName: '修改密码',
      OldPassword: '',
      setOnePassword: '',
      setTwoPassword: '',
      OldPasswordError: '',
      setOnePasswordError: '',
      setTwoPasswordError: ''
    }
  },

  computed: {},

  watch: {},

  created () {
    if (localStorage.getItem('X-Auth-Token')) {
      // this.GetJson()
    } else {
      this.$toast.fail('请登录')
      this.$router.push('./login?tabs=0')
    }
  },

  mounted () {},

  destroyed () {},

  methods: {
    GetData () {
      let postData = { newPassword: this.setOnePassword, oldPassword: this.$md5(this.OldPassword) }
      updatePassword(this.$qs.stringify(postData)).then(res => {
        console.log(res.data.data)

        if (res.data.code === 200) {
          this.$toast('密码修改成功，请重新登录')
          localStorage.removeItem('X-Auth-Token')
          this.$router.push('./login?tabs=0')
        } else if (res.data.code === 500) {
          this.$toast(res.data.message)
        }
      })
        .catch(err => {
          console.log(err)
        })
    },

    changepasswordBtn () {
      if (this.OldPassword === '') {
        this.OldPasswordError = '旧密码不可为空'
      } else if (this.setOnePassword === '') {
        this.OldPasswordError = ''
        this.setOnePasswordError = '新密码不可为空'
      } else if (this.setTwoPassword === '') {
        this.OldPasswordError = ''
        this.setOnePasswordError = ''
        this.setTwoPasswordError = '校验密码不可为空'
      } else if (this.setOnePassword !== this.setTwoPassword) {
        this.OldPasswordError = ''
        this.setOnePasswordError = ''
        this.setTwoPasswordError = ''
        this.$toast.fail('两次密码输入不一致')
      } else {
        // 执行参数进行修改
        this.GetData()
      }
    }
  }
}
</script>

<style lang="less" >
/* ... */
.container {
  margin: 0 15px;
}
.ChangePassword {
  background-color: #f6f6f6;
  height: 100%;

  .ChangePasswordBox {
    margin-top: 10px;
    margin-bottom: 30px;
    padding-bottom: 10px;
    .van-cell-group {
      .van-cell {
        .van-cell__value {
          .van-field__body {
            .van-field__button {
              padding: 2px;
            }
          }
        }
      }
    }
  }
}
</style>
